<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择部门</title>
    <link rel="stylesheet" href="../../layui-transfer/layui/layui/css/layui.css">
    <style>
        .layui-form-item{
            margin-top: 20px;
        }
    </style>
</head>
<body>
<form class="layui-form" action="javascript:;">
    <div class="layui-form-item">
        <label class="layui-form-label">名称：</label>
        <div class="layui-input-inline">
            <input type="text" name="deptName" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="go">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>




</form>


<div id="demo"></div>
<div style="text-align: center">
    <button class="layui-btn" id="queding">确定</button>
    <button class="layui-btn layui-btn-danger" id="quxiao">取消</button>
</div>


<script src="../../layui-transfer/layui/layui/layui.js"></script>
<script>

    var transfer;
    var $;
    var form;
    layui.config({
        base:'../../layui-transfer/layui_exts/transfer/'
    }).use(['transfer','form'],function (){
        transfer = layui.transfer;
        $ = layui.$;
    form= layui.form;

    form.on('submit(go)',function (d){

        // ajax查询
        $.ajax({
            type:'post',
            url:'/dept/getDeptsByName',
            data:d.field,
            dataType: 'json',
            success:function (res){
                // 渲染穿梭框
                gettransfer(res);
            }
        })



    })



        $.ajax({
            type:'get',
            url:'/dept/getAll',
            data:{},
            dataType:'json',
            success:function (res){

                gettransfer(res);
            }
        })

    })

    function gettransfer(d){

        var data1 = d;
        var data2 = [];
// 解析数据
        var cols = [ // 设置列名
            {type:'checkbox'},
            {field:'id',title:'ID列'},
            {field: 'deptName',title:'部门名称'}

        ]

        // table的配置
        var tableconfig = {'page':true}

        var transferInd = transfer.render({
            elem:'#demo',
            cols:cols,
            data:[data1,data2],
            tabConfig:tableconfig
        })


        // 确定按钮的单击事件
        $("#queding").click(function (){

            let ids = transfer.get(transferInd,'right','id');
            let deptnames = transfer.get(transferInd,'right','deptName');

            // 将数据填充到父页面
            parent.$("#deptname").val(deptnames);
            parent.$("#deptIds").val(ids);

            //关闭当前弹框
            var index =parent.layer.getFrameIndex(window.name);//先得到当前iframe层的索引
            parent.layer.close(index);//再执行关闭


        })

        $("#quxiao").click(function (){
            //关闭当前弹框
            var index =parent.layer.getFrameIndex(window.name);//先得到当前iframe层的索引
            parent.layer.close(index);//再执行关闭
        })

    }



</script>
</body>
</html>